<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable ref="proRef" :columns="columns" :init-param="initParams" :request-api="getUserList">
        <template #info="{ row }">
          <div>{{ row.username }}</div>
          <div>{{ row.phone }}</div>
        </template>
        <template #port="{ row }">{{ row.origin_name }}</template>
        <template #region="{ row }">{{ row.city ? row.city : "暂无" }}</template>
        <template #childRegion="{ row }">{{ row.region_list ? row.region_list.join("/") : "暂无" }}</template>
        <template #louPanName="{ row }">{{ row.intend_lou ? row.intend_lou : "公共页面" }}</template>
        <template #update_time="{ row }">{{
          row.last_update_time === "0001-01-01 00:00:00" || !row.last_update_time ? "无" : row.last_update_time
        }}</template>
        <template #first_in_time="{ row }">{{
          row.first_in_time === "0001-01-01 00:00:00" || !row.first_in_time ? "无" : row.first_in_time
        }}</template>
        <template #level="{ row }">
          <span v-show="row.level !== 'F'">{{ row.level }}级</span>
          <span v-show="row.level === 'F'">未评级</span>
        </template>
        <template #valid="{ row }">
          <el-tag type="success" v-show="row.valid === 1">已验证</el-tag>
          <el-tag type="warning" v-show="row.valid === 0">未验证</el-tag>
        </template>
        <template #opera="{ row }">
          <el-button type="primary" @click="go(row.id)">详情</el-button>
          <el-button type="info" v-if="!row.is_shield" @click="shield(row, true)">屏蔽</el-button>
          <el-button type="warning" v-if="row.is_shield" @click="shield(row, false)">恢复</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import { getOriginList } from "@/api/modules/countrySetting";
import { getActivities } from "@/api/modules/commonActivity";
import { getUserList, shieldPhone } from "@/api/modules/myUser";
// import dayjs from "dayjs";
import { GetRegionByAccount } from "@/api/modules/account";
import { useRouter } from "vue-router";
import { useHandleData } from "@/hooks/useHandleData";

const router = useRouter();

const go = (id: number) => {
  router.push({ name: "UserDetail", query: { id } });
};

const initParams = reactive({ pageNum: 1 });

const proRef = ref<InstanceType<typeof ProTable> | null>();

const getLevelList = () => {
  return new Promise(res => {
    res({
      code: 200,
      msg: "成功",
      data: [
        { value: "A", label: "A" },
        { value: "B", label: "B" },
        { value: "C", label: "C" },
        { value: "D", label: "未评级" }
      ]
    });
  });
};

const getValid = () => {
  return new Promise(res => {
    res({
      code: 200,
      msg: "成功",
      data: [
        { value: -1, label: "全部" },
        { value: 1, label: "验证" },
        { value: 0, label: "未验证" }
      ]
    });
  });
};

const columns: ColumnProps[] = [
  { prop: "phone", label: "手机号", isShow: false, search: { el: "input" } },
  { prop: "info", label: "客户信息", fixed: "left", width: 200 },
  {
    prop: "originName",
    label: "客户来源",
    search: { el: "select" },
    fieldNames: { label: "name", value: "id" },
    enum: getOriginList,
    width: 150,
    isShow: false
  },
  {
    prop: "port",
    label: "客户来源",
    width: 150
  },
  {
    prop: "activityId",
    label: "线索类型",
    isShow: false,
    search: { el: "select" },
    fieldNames: { value: "id", label: "title" },
    enum: getActivities
  },
  {
    prop: "region",
    label: "意向城市",
    search: { el: "cascader", props: { props: { emitPath: false, checkStrictly: true } } },
    enum: GetRegionByAccount,
    fieldNames: { label: "name", value: "region_link", children: "districts" },
    width: 180
  },
  {
    prop: "childRegion",
    label: "意向区域",
    width: 180
  },
  { prop: "louPanName", label: "意向楼盘", search: { el: "input" }, width: 200 },
  { prop: "level", label: "客户等级", search: { el: "select" }, enum: getLevelList, width: 150 },
  { prop: "create_time", label: "首次录入时间", search: { el: "date-picker", props: { type: "datetimerange" } }, width: 200 },
  { prop: "update_time", label: "最近一次录入时间", search: { el: "date-picker", props: { type: "datetimerange" } }, width: 200 },
  {
    prop: "first_in_time",
    label: "管家首次跟进时间",
    search: { el: "date-picker", props: { type: "datetimerange" } },
    width: 200
  },
  { prop: "ip", label: "ip/归属地", width: 180 },
  { prop: "valid", label: "验证/未验证", enum: getValid, search: { el: "select", defaultValue: -1 }, width: 150 },
  {
    prop: "is_shield",
    label: "是否屏蔽",
    isShow: false,
    search: {
      el: "switch",
      props: { "inactive-value": false, "active-value": true, "inactive-text": "否", "active-text": "是" }
    }
  },
  { prop: "opera", label: "操作", fixed: "right", width: 200 }
];

// 屏蔽电话
const shield = async (row: any, is_shield: boolean) => {
  try {
    await useHandleData(shieldPhone, { id: row.id, is_shield }, "操作成功");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
